<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<title>Dynamic Icons</title>

	<link href="../../../dijit/themes/tundra/tundra.css" rel="stylesheet"/>
	<script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base','Button','IconContainer']"></script>
	<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: false, parseOnLoad: true"></script>

	<script type="text/javascript">
		require([
			"dojo/_base/connect",
			"dojo/ready",
			"dijit/registry",
			"dojox/mobile/IconItem",
			"dojox/mobile/IconContainer",
			"dojox/mobile/Button",
			"dojox/mobile/parser",
			"dojox/mobile",
			"dojox/mobile/compat"
		], function(connect, ready, registry, IconItem){
			ready(function(){
				var btnWidget = registry.byId("btn1");
				connect.connect(btnWidget.domNode, "onclick", onBtnClicked);
				function onBtnClicked(e){
					var iconContainerWidget = registry.byId("ic1");
					var itemWidget = new IconItem({
						icon: "images/icon-1.png",
						label: "new icon",
						lazy: true
					});
					itemWidget.set("content", "<div data-dojo-type='dijit._Calendar'></div>");
					iconContainerWidget.addChild(itemWidget);
				}
			});
		});
	</script>

	<style>
		.box {
			border: 1px solid #A7C0E0;
			width: 300px;
			height: 250px;
			background-image: url(images/widget-bg.png);
			background-repeat: no-repeat;
			background-color: white;
		}
	</style>
</head>
<body style="visibility:hidden;" class="tundra">
	<div id="myhome" data-dojo-type="dojox.mobile.View" data-dojo-props='selected:true'>
		<ul id="ic1" data-dojo-type="dojox.mobile.IconContainer">
			<li data-dojo-type="dojox.mobile.IconItem" data-dojo-props='label:"test1", icon:"images/icon-1.png", lazy:true'><div class="box"></div></li>
		</ul>
		<button id="btn1" data-dojo-type="dojox.mobile.Button" class="mblBlueButton" style="width:80px;margin-left:10px">More...</button>
	</div>
</body>
</html>
